<template> 
    <div class="container">
        <div class="header">
            <h2 style="display: inline-block;margin-right: 20px;">{{ survey.surveyName }}</h2>
            <el-button type="primary" icon="Document" @click="handleExport">导出</el-button>
            <el-button type="default" icon="Back" @click="handleBack">返回</el-button>
        </div>
        

        <el-table v-loading="loading" stripe :data="dataList">
            <!-- <el-table-column fixed prop="user" label="用户" width="150" /> -->

            <el-table-column v-for="h in headers" :label="h.questionName" :prop="h.questionId" />
            
            <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope"> 
                    <el-button size="small" type="primary" text icon="View" @click="handlePreview(scope.row)">预览</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <el-pagination
            style="margin-top: 10px"
            size="small" 
            layout="prev, pager, next, jumper, ->, total"
            :total="total"
            :page-size="queryParams.pageSize"
            :current-page="queryParams.pageNum"
            @current-change="getDataList"
        />

    </div>
</template>

<script>
import { getSurvey } from "@/api/survey/survey";
import { listBySurveyId } from "@/api/survey/question";
import { pageJsonAn } from "@/api/survey/answer";
export default {
    name: "Detail",
    data() {
        return {
            surveyId: this.$route.params.id,
            loading: true,
            total: 0,
            survey: {},
            headers: [],
            dataList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        }
    },
    created() {
        this.surveyId = this.$route.params.id;
        this.getSurvey();
        this.getQuestionList();
        this.getDataList();
    },
    methods: {
        getSurvey() {
            getSurvey(this.surveyId).then(response => {
                this.survey = response;
            })
        },
        getQuestionList() {
            listBySurveyId(this.surveyId).then(response => {
                this.headers = response.filter(item => 
                    (item.questionType !== 'title' && item.questionType!== 'text' && item.questionType!== 'table' && item.questionType!== 'file'));
                this.loading = false;
            })
        },
        getDataList() {
            pageJsonAn({"surveyId": this.surveyId}).then(response => {
                const data = response.records;
                this.total = response.total;
                for (let i = 0; i < data.length; i++) {
                    const item = data[i];
                    let obj = {
                        "user": item.userName,
                    };
                    const list = JSON.parse(item.answerJson)
                    for (let j = 0; j < list.length; j++) {
                        const element = list[j];
                        obj[element.questionId] = element.answerValue;
                    }
                    this.dataList.push(obj);
                }
                this.loading = false;
            })
        },
        handleBack() {
            this.$router.push("/analysis/survey1");
        }

    }
}
</script>
<style scoped>
.header {
    margin-bottom: 20px;
}
</style>